<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>放大10倍求和为: {{ bigSum }}</h3>
    <h3>学校: {{ school }},学习: {{ subject}}</h3>
    <!-- (1) 下拉选择框获得的数据默认是 字符串，可以通过在双向绑定v-model加上number
             强制转化
    -->
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "myCount",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    // increment() {
    //   this.$store.commit("Add", this.n);
    // },
    // decrement() {
    //   this.$store.commit("Sub", this.n);
    // },

    ...mapMutations({increment:'Add',decrement:'Sub'}),


    // incrementOdd() {
    //   this.$store.dispatch("addOdd", this.n);
    // },
    // incrementWait() {
    //   this.$store.dispatch("addWait", this.n);
    // },

    ...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})

  },
  // (2) 通过计算属性来让模板表达式尽可能简单，相当于在本地组件里再重新添加简写形式
  computed: {
    // 程序员自己写的计算属性
    // sum(){
    //   return this.$store.state.sum
    // },
    // school(){
    //   return this.$store.state.school
    // },
    // subject(){
    //   return this.$store.state.subject
    // },
    
    /**
     * 借助mapState生成计算属性，从state获取数据 ( 对象形态 )
     * 键是计算属性，后面引号里的表示从State中取
     * */ 
    ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

    /**
     * 借助mapState生成计算属性，从state获取数据 ( 数组形态 )
     * 必须要计算属性和State中属性名字一样才行
     * */ 
    ...mapState(['sum','school','subject']),

    /**
     * 借助mapGetters生成计算属性，从getters获取数据 ( 数组形态 )
    */
    ...mapGetters(['bigSum']),

    // bigSum(){
    //   return this.$store.getters.bigSum
    // },
  },
};
</script>
